<script>

export default {
  name: "makeup",
  data(){
    return{
      topList:[],
      List:[]
    }
  },
  onShow(){
    this.getList()
  },
  methods:{
    goPage(){
      this.$Router.push({
        path: "/pages/goods/categorydetailmodel",
        query: { id: '39,45' ,name: '美妆护肤'}
      });
    },
    getList(){
      this.$http('goods.getCateGood',{
        cateId: 5,
        top: 2
      })
      .then(res=>{
        this.topList = res.data.tops
        this.List = res.data.products
      })
    },
    editPrice(e){
      e = e.toString()
      let arr = e.split('.')
      if(arr[1] == '00'){
        return arr[0]
      }else{
        return e
      }
    },
    toGoods(e){
      this.$Router.push({
        path: '/pages/goods/detail',
        query: {
          id: e,
        }
      })
    }
  }
}
</script>

<template>
  <view>
<!--    <ljshop-back></ljshop-back>-->
    <view class="content">
      <image
          style="width: 100%;height: 100%;"
          src="https://image.hzwltb69.com/app/date/2023/makeup05.png" mode="widthFix" ></image>
    </view>
    <view class="bodys">
      <view class="top-box">
        <view class="img-box">
          <image src="https://image.hzwltb69.com/app/date/2023/makeup03.png"></image>
        </view>
        <view class="tip-box">
          <view v-if="topList.length > 0" class="box" @click="toGoods(topList[0].id)">
            <view class="imgbox">
              <image :src="topList[0].img"></image>
            </view>
            <view class="ontime">
              <view style="font-size: 20rpx">秒杀价</view>
              <view>{{topList[0].price}}</view>
            </view>
            <view class="info">
<!--              <view class="info-text">-->
<!--                <view>热卖爆款</view>-->
<!--                <view>镇店之宝</view>-->
<!--              </view>-->
            </view>
          </view>
          <view v-if="topList.length > 1" class="box" @click="toGoods(topList[1].id)">
            <view class="imgbox">
              <image :src="topList[1].img"></image>
            </view>
            <view class="ontime">
              <view style="font-size: 20rpx">秒杀价</view>
              <view>{{topList[1].price}}</view>
            </view>
            <view class="info">
<!--              <view class="info-text">-->
<!--                <view>热卖爆款</view>-->
<!--                <view>镇店之宝</view>-->
<!--              </view>-->
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="card" v-for="item,index in List" :key="index" @click="toGoods(item.id)">
          <view class="imgbox">
            <image :src="item.img" mode="widthFix" ></image>
          </view>
          <view class="info">
            <view class="title">
              <view class="titles">{{item.name}}</view>
              <view class="desc">{{ item.subtitle ? item.subtitle : ''}}</view>
            </view>
            <view class="price">{{editPrice(item.price)}}</view>
          </view>
        </view>
      </view>
      <view class="more">
        <view class="morebox" @click="goPage">查看更多</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.content{
background-color: #ff8d9c;
}
.more{
  margin-top: 20rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  .morebox{
    padding: 10rpx;
    border-radius: 30rpx;
    width: 200rpx;
    text-align: center;
    color: #fff;
    background: #fc6f99;
  }
}
.bodys{
  width: 100%;
  height: 100%;
  background: #ff8d9c;
  padding: 20rpx;
  .list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .card{
      width: 48%;
      height: 400rpx;
      background: linear-gradient(180deg,#faa0b9 20%,#fa769d 80%);
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      .imgbox{
        width: 300rpx;
        height: 280rpx;
        background: #fff;
        border-radius: 20rpx;
        overflow: hidden;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10rpx;
        .title{
          color: #fff;
          .titles{
            font-size: 24rpx;
            width: 200rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .desc{
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 200rpx;
          }
        }
        .price{
          color: #fdc3a6;
          font-size: 35rpx;
          font-weight: bold;
          position: relative;
        }
        .price::after{
          content: "￥";
          position: absolute;
          left: -30rpx;
          top: 20rpx;
          font-size: 20rpx;
          font-weight: bold;
        }
      }
    }
  }
  .top-box{
    width: 100%;
    height: 500rpx;
    background: url("https://image.hzwltb69.com/app/date/2023/makeup02.png") no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    //align-items: center;
    padding: 30rpx 60rpx 0 60rpx;
    .img-box{
      image{
        margin-right: 40rpx;
        width: 600rpx;
        height: 100rpx;
      }
    }
    .tip-box{
      width: 100%;
      height: 270rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 10rpx;
      .ontime{
        width: 120rpx;
        height: 120rpx;
        background: linear-gradient(110deg,#f35d76,#f8acc0);
        border-radius: 50%;
        border: 5rpx solid #f17f99;
        font-size: 40rpx;
        color: #fff;
        // 斜体
        font-style: italic;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        position: absolute;
        bottom: 10rpx;
        right: 10rpx;
      }
      .box{
        width: 280rpx;
        height: 270rpx;
        background: linear-gradient(50deg,#f6c1c9,#f6e0e3);
        border-radius: 30rpx;
        //粉红色盒子阴影
        box-shadow: 0 10rpx 40rpx #e5818d;
        border: 2rpx solid #e38995;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx 0 20rpx;
        position: relative;

        .imgbox{
          width: 100%;
          height: 80%;
          //background: red;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .info{
          display: flex;
          height: 80%;
          flex-direction: column;
          justify-content: space-between;
          font-size: 24rpx;
          text-align: center;
          .info-text{
            color: #e66371;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>